<template>
  <div class="column-yhq">
    <van-button
      class="coupon-btn"
      type="primary"
      size="large"
      block
      @click="getCoupon()"
      v-if="showType == 1"
      >立即领取</van-button
    >
    <!-- 优惠券使用方法 -->
    <div
      v-if="showType == 2"
      class="use-coupon"
    >
      <div class="quan_line">
        <img
          src="../images/quan_line.png"
          width="220"
          height="50"
        />
      </div>
      <div class="quan-er">
        <img
          src="../images/quan_er.png"
          width="150"
          height="150"
        />
        <p>请务必“长按”保存到手机相册</p>
      </div>

      <column-divide :columnName="columnName"></column-divide>
      <div class="useway">
        <div class="item">
          <img
            src="../images/quan_get.png"
            width="37"
            height="37"
          />
          <p>领券</p>
        </div>
        <div class="item">
          <img
            src="../images/pay_line.png"
            width="37"
            height="37"
          />
          <p>消费时出示券码</p>
        </div>
        <div class="item">
          <img
            src="../images/quan_cards.png"
            width="37"
            height="37"
          />
          <p>
            <span>银联刷卡</span>
            <span>(卡号以62开头)</span>
          </p>
        </div>
      </div>
    </div>

    <!-- 领取状态 -->
    <div
      class="get-coupon-status"
      :class="{ 'dis-block': couponStatus !== '', 'dis-none': couponStatus === '' }"
    >
      <div class="prompt">{{ couponStatus }}</div>
      <a
        href="javascript:;"
        class="btn"
        @click="toUse()"
        >立即使用</a
      >
    </div>

    <!-- 填写评论 -->
    <div
      class="add-comment-wraper"
      v-if="showType == 2"
    >
      <div style="margin: 2% 3%">
        <div class="comment-num clearfix">
          <div class="comment-num-star">
            <span class="comment-num-star-txt">您的评价</span>
            <span
              class="star-wraper"
              id="star"
            >
            </span>
          </div>
          <div class="comment-num-txt">
            <van-rate
              v-model="value"
              :size="20"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
          </div>
        </div>
        <div class="add-comment clearfix">
          <input
            type="text"
            v-model="commentContent"
            class="comment-box"
            id="comment-box"
          />
          <input
            type="button"
            value="发布"
            id="publish-comment"
            class="publish-comment"
            @click="getUsersComment"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ColumnDivide from '@/components/dx/column-divide';
import { Toast } from 'vant';
import { mapState } from 'vuex';
import {addCoupon,addComments} from "@/api"
export default {
  created() {
    this.id = this.$route.params.id;
  },
  components: {
    ColumnDivide,
  },
  computed: {
    ...mapState({
      obj1: (state) => state.getCoupon.obj1,
    }),
  },
  data() {
    return {
      columnName: '参与方式',
      showType: 1,
      commentContent: '',
      couponStatus: '',
      couponMark: 0,
      value: 5,
      id: '',
      obj2:{}
    };
  },
  methods: {
    getCoupon() {
      const token=localStorage.getItem("token")||""
      if (token !== "" ) {
        this.obj2.coupon_id=this.id
        this.obj2.user_id=JSON.parse(localStorage.user).id
        this.obj2.status=1
        addCoupon(this.obj2)
        return (this.couponStatus = '领取成功');
      }
      this.$router.push('/login');
      this.couponStatus === '';
    },
    toUse() {
      this.showType = '2';
      this.couponStatus = '';
    },
    getUsersComment() {
      if (this.commentContent === '') {
        Toast('请输入评论');
      } else {
        // console.log(this.obj1);
        this.obj1.comment_content = this.commentContent;
        this.obj1.comment_star = this.value;
        let phone = JSON.parse(localStorage.getItem('user')).user_phone;
        this.obj1.comment_user_phone = phone;
        var time = new Date();
        this.obj1.comment_time = time.getTime();
        this.obj1.comment_coupon_id = this.id;
        addComments(this.obj1)
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.column-yhq {
  .coupon-btn {
    width: 90%;
    height: 37px;
    margin: 0 auto;
    line-height: 37px;
    text-align: center;
    border-radius: 4px;
    background-color: #23a1df;
    color: #fff;
    font-size: 16px;
  }

  .use-coupon {
    .quan_line,
    .quan-er {
      text-align: center;
    }
    .useway {
      display: flex;
      .item {
        flex: 1;
        text-align: center;
        font-size: 12px;
        span {
          display: block;
          line-height: 20px;
        }
      }
    }
  }

  .get-coupon-status {
    position: fixed;
    z-index: 10001;
    top: 30%;
    left: 50%;
    margin-left: -98px;
    width: 197px;
    height: 209px;
    background-image: url('../images/lingqu.png');
    background-repeat: no-repeat;
    background-size: 197px 209px;
    .prompt {
      position: absolute;
      top: 128px;
      width: 100%;
      height: 35px;
      line-height: 35px;
      text-align: center;
      font-size: 15px;
    }
    .btn {
      display: block;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 42px;
      line-height: 40px;
      text-align: center;
      font-size: 15px;
      color: #fff;
    }
  }

  .dis-block {
    display: block;
  }
  .dis-none {
    display: none;
  }

  .add-comment-wraper {
    position: fixed;
    bottom: 0;
    z-index: 10001;
    width: 100%;
    max-width: 640px;
    background-color: #fff;
    .comment-num {
      margin-bottom: 7px;
      .comment-num-star {
        float: left;
        .star-wraper {
          display: inline-block;
        }
        .comment-num-star-txt {
          margin-right: 10px;
        }
      }
      .comment-num-txt {
        font-size: 17px;
        font-weight: 500;
        .van-rate {
          margin-left: 10px;
        }
      }
    }
    .add-comment {
      position: relative;
      z-index: 90;
      .publish-comment {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 20%;
        height: 30px;
        border-radius: 25px;
        border: 1px solid #23a1df;
        color: #23a1df;
        font-size: 15px;
        background-color: #fff;
      }
    }
    .comment-box {
      position: relative;
      bottom: 0;
      width: 74%;
      min-height: 30px;
      line-height: 30px;
      padding-left: 3%;
      border-radius: 25px;
      background-color: #efefef;
    }
  }

  // @media only screen and (min-width: 640px) {
  //   .add-comment-wraper {
  //     left: 50%;
  //     margin-left: -320px;
  //   }
  // }
}
</style>
